<!-- 发送聊天群成员 -->
<template>
  <div class="ready-contact_box">
    <div class="header">
      <div class="avatar_box">
        <chat-avatar
          :size="180"
          :content="userInfo.avatar || userInfo.name"
        ></chat-avatar>
      </div>
      <div class="right_box">
        <div class="item_box">
          <span class="label">登录账号：</span>
          <span>{{ userInfo.code }}</span>
        </div>
        <div class="item_box">
          <span class="label">姓名：</span>
          <span>{{ userInfo.name }}</span>
        </div>
        <div class="item_box">
          <span class="label">职位：</span>
          <span>{{ userInfo.duties }}</span>
        </div>
        <div class="item_box">
          <span class="label">部门：</span>
          <span>{{ userInfo.departmentName }}</span>
        </div>
        <div class="item_box">
          <span class="label">值班电话：</span>
          <span>{{ userInfo.onDutyPhone }}</span>
        </div>
        <div class="item_box">
          <span class="label">工作电话：</span>

          <span>{{ userInfo.workPhone }}</span>
        </div>
        <div class="item_box">
          <span class="label">手机号：</span>

          <span>{{ userInfo.phone }}</span>
        </div>
        <div class="item_box">
          <span class="label">个性签名：</span>
          <span>{{ userInfo.motto }}</span>
        </div>
      </div>
    </div>
    <div class="footer_btn">
      <el-button class="btn" type="primary" @click="handleSendMessage"
        >发送消息</el-button
      >
    </div>
  </div>
</template>

<script>
import { createChat } from "@/api/chat"
import { mapState } from "vuex"
import chatAvatar from "../common/avatar.vue"
import lockr from "lockr"

export default {
  components: { chatAvatar },
  props: {
    userInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {}
  },
  computed: {
    ...mapState(["recentChatList", "recentTopChatList"])
  },

  methods: {
    handleSendMessage() {
      this.$store.commit("setIsGroup", false)
      this.$store.dispatch("getCurrentChatUserInfo", this.userInfo.id)
      this.setChatIdByReceiverId()
      this.$store.commit("setSelectedMenu", "badge")
    },
    async setChatIdByReceiverId() {
      const chatList = [...this.recentTopChatList, ...this.recentChatList]
      const curChat = chatList.find(
        (item) => item.receiverId == this.userInfo.id
      )
      if (curChat) {
        this.$store.commit("setCurrentChatInfo", curChat)
        this.$store.commit("setChatId", curChat.id)
        if (curChat.isShow === false) {
          //调取显示
        }
        this.$store.commit("updateActionChat", { id: curChat.id, isShow: true }) //更新排序
      } else {
        this.$store.commit("setCurrentChatInfo", "")
        this.$store.commit("setChatId", "")
        this.$store.commit("setReceiverId", this.userInfo.id)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.header {
  margin: 37px 0 0 55px;
  display: flex;
  // align-items: center;
  .right_box {
    font-size: 12px;
    color: #333;
    padding-left: 20px;
    width: 500px;
    .item_box {
      display: flex;
      align-items: center;
      padding-bottom: 12px;
      .label {
        color: #666;
      }
    }
    .item_content {
      display: flex;
      // align-items: center;
      padding-bottom: 5px;
      .label {
        width: 80px;
        color: #666;
      }
    }
  }
}

.change-avatar_btn {
  margin-top: 16px;
  width: 180px;
  height: 40px;
}

.footer_btn {
  text-align: center;
  margin-top: 180px;
  .btn {
    width: 180px;
    height: 40px;
  }
}
</style>
